<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  button {
    font-size: 25px;
    color: darkgreen;
  }

  h4 {
    font-size: 25px;
    color: black;
  }

  input {
    display: inline-block;
  }
</style>

<body>
  输入你要抽取的人数：<input type="text">
  <button>开始抽取</button>
  <p></p>
  <script>
    function getRandomName() {
      let iptvl = document.querySelector('input').value
      console.log(iptvl);
      let name = [] //此处输入要抽的人员名单
      if (iptvl > 0 && iptvl <= name.length) {
        let col = '这' + iptvl + '名同学为：';
        for (let i = 1; i <= iptvl; i++) {
          let a = (Math.floor(Math.random() * name.length))
          col = col + name[a] + '  '
          console.log(name.splice(a, 1));
        }
        return col
      } else {
        return '你输入的人数不正确'
      }
    }
    let btn = document.querySelector('button')
    btn.onclick = function () {
      let p1 = document.querySelector('p')
      p1.innerText = getRandomName()
      document.querySelector('p').style.color = 'red'
      document.querySelector('p').style.fontSize = '26px'

    }
  </script>
</body>

</html>